
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>08.案例_个人信息修改</title>
  <link rel="stylesheet" href="https://unpkg.com/bootstrap@5.1.3/dist/css/bootstrap.min.css" />
  <style>
    .form-select {
      width: 103px;
      display: inline-block;
    }

    .col-form-label {
      text-align: right;
    }

    .figure-img {
      width: 100px;
      height: 100px;
      cursor: pointer;
    }

    #upload {
      display: none;
    }
  </style>
</head>

<body>
  <div class="container">
    <h1 class="p-5">个人设置</h1>
    <form class="col-6">
      <div class="row mb-3">
        <label class="col-form-label col-3">昵称：</label>
        <div class="col-9">
          <input id="nickname" class="form-control col-9" type="text" name="nickname" />
        </div>
      </div>
      <div class="row mb-3">
        <label class="col-form-label col-3">籍贯：</label>
        <div class="col-9">
          <select id="province" class="form-select col-4" name="province">
            <option value="">--省--</option>
          </select>
          <select id="city" class="form-select col-4" name="city">
            <option value="">--市--</option>
          </select>
          <select id="area" class="form-select col-4" name="area">
            <option value="">--区--</option>
          </select>
        </div>
      </div>
      <div class="row mb-3">
        <label class="col-form-label col-3">头像：</label>
        <div class="col-9">
          <input class="form-control col-9" type="hidden" name="avatar" />
          <figure class="figure">
            <input type="file" id="upload" />
            <img id="avatar" src="https://yanxuan-item.nosdn.127.net/12a882699bd531a1bd428bffe1989525.jpg"
              class="figure-img img-fluid rounded" alt="..." />
            <figcaption class="figure-caption">修改头像</figcaption>
          </figure>
        </div>
      </div>
      <div class="row mb-3">
        <label class="col-3"></label>
        <div class="col-9">
          <button id="btnSave" class="btn btn-primary">保存</button>
        </div>
      </div>
    </form>
  </div>

  <script src="https://unpkg.com/bootstrap@5.1.3/dist/js/bootstrap.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
  <script src="./lib/form-serialize.js"></script>
  <script>
    // 1. 数据回填：获取数据，显示出来
    axios.defaults.baseURL = 'http://ajax-api.itheima.net/'

    function $(id) {
        return document.querySelector('#' + id)
    }
    async function getInfo () {
        const res = await axios.get('api/settings')
        // const obj = res.data.data
        const { area, avatar, city, nickname, province} = res.data.data
        // console.log(obj);

        // 数据回填
        $('avatar').src = avatar
        $('nickname').value = nickname

        // 把省的数据整体填入select
        const resProvince = await axios.get('/api/province')
        // console.log(resProvince);
        $('province').innerHTML += resProvince.data.data.map(p => `<option value="${p}">${p}</option>`).join('')
        $('province').value = province

        // 把市的数据整体填入select
        const resCity = await axios.get('/api/city?pname='+province)
        // console.log(resCity);
        $('city').innerHTML += resCity.data.data.map(p => `<option value="${p}">${p}</option>`).join('')
        $('city').value = city

        // 把区的数据整体填入select
        const resArea = await axios.get(`/api/area?pname=${province}&cname=${city}`)
        console.log(resArea);
        $('area').innerHTML += resArea.data.data.map(p => `<option value="${p}">${p}</option>`).join('')
        $('area').value = area

    }

    getInfo()


    // 给省这个下拉框添加change事件
    $('province').addEventListener('change',async () => {
        // 拿到最新的省
        const province = $('province').value
        // 发请求，得到对应的市
        const resCity = await axios.get('/api/city?pname='+province)
       
        // 添加到页面
        $('city').innerHTML = resCity.data.data.map(p => `<option value="${p}">${p}</option>`).join('')
        // 默认选中第一个市
        const city = resCity.data.data[0]
        $('city').value = city

        // 根据最新的city，去请求得到对应的区
        // 把区的数据整体填入select
        const resArea = await axios.get(`/api/area?pname=${province}&cname=${city}`)
        console.log(resArea);
        $('area').innerHTML = resArea.data.data.map(p => `<option value="${p}">${p}</option>`).join('')
        $('area').value = resArea.data.data[0]

    })

    // 给市这个下拉框添加change事件
    $('city').addEventListener('change',async () => {
        // 拿到最新的省
        const province = $('province').value
        // 拿到最新的市
        const city = $('city').value
        // 发请求，得到对应的市
        // console.log(city)

        // 根据最新的city，去请求得到对应的区
        // 把区的数据整体填入select
        const resArea = await axios.get(`/api/area?pname=${province}&cname=${city}`)
        console.log(resArea);
        $('area').innerHTML = resArea.data.data.map(p => `<option value="${p}">${p}</option>`).join('')
        $('area').value = resArea.data.data[0]

    })

    // 保存
    $('btnSave').addEventListener('click', async (e) => {
        e.preventDefault()
        console.log(1)
        const nickname = $('nickname').value
        const province = $('province').value
        const city = $('city').value
        const area = $('area').value
        const avatar = $('avatar').src
        try {
            await axios.put('/api/settings1', {
                nickname,
                province,
                city,
                area,
                avatar
            })
            alert('ok')
        } catch(err){
            alert('error')
        }
    })

  </script>
 
</body>

</html>